@charset "utf-8";

@function vw($a) {
    @return ( $a / 640) * 100vw;
}

header{
    height: vw(75);
    line-height: vw(75);
    box-sizing: border-box;
    padding-left: vw(28);
    padding-right: vw(28);
    top: 0;
    i{
        color: #000;
        float: left;
    }
    .iconfont{
        font-size: vw(30);
    }
    h6{
        font-size: vw(30);
        text-align: center;
    }
}


section{
    top: vw(75);
    bottom: 0;
    width: 100%;
    border-top: vw(1) solid #a7a7a7;
    .setting{
        font-size: vw(24);
        line-height: vw(100);
        padding: 0 vw(28);
        border-bottom: vw(1) solid #e5e5e5;
        .left{
            float: left;
            p{
                color: #000;
            }
        }
        .right{
            height: vw(100);
            float: right;
            color: #000;
            box-sizing: border-box;
            padding: vw(19) 0;
            p{
                font-size: vw(30);
                line-height: vw(62);
            }
        }
    }
    .exit{
        width: vw(300);
        height: vw(68);
        margin: 0 auto;
        padding: vw(28);
        input{
            line-height: vw(68);
            width: 100%;
            height: 100%;
            background: #333333;
            color: #fff;
            font-size: vw(24);
            border-radius:vw(5) ;
        }
    }
}


/*Toggle Specific styles*/

input[type='checkbox'].toggle {
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: vw(100);
    height: vw(60);
    background-color: #000;
    position: relative;
    -moz-border-radius: vw(61);
    -webkit-border-radius: vw(61);
    border-radius: vw(61);
    @inlcude box-shadow(none);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

input[type='checkbox'].toggle:hover:after {
    background-color: #c7c7c7;
}

input[type='checkbox'].toggle:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: vw(56);
    height: vw(56);
    background-color: #fff;
    top: vw(2);
    left: vw(2);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    border: vw(1) solid #b5b5b5;
}

input[type='checkbox']:checked.toggle {
    -moz-box-shadow: inset 0 0 0 vw(31) #fff;
    -webkit-box-shadow: inset 0 0 0 vw(31) #fff;
    box-shadow: inset 0 0 0 vw(31) #fff;
}

input[type='checkbox']:checked.toggle:after {
    left: vw(42);
    box-sizing: border-box;
    border: vw(1) solid #b5b5b5;
    background-color: #fff;
}